<template>
  <div class="an-sort-page">
    <top-search />

    <div class="an-sort" v-if="tabList.length>0">
      <van-sidebar v-model="activeKey" class="an-left" @change="changeTypeFirst">
        <van-sidebar-item :title="item.typeName" v-for="item in tabList" :key="item.id" />
      </van-sidebar>
      <div class="an-right-body">
        <van-tabs v-model:active="activeSecond" @click="clickSecondType">
          <van-tab :title="item.typeName" :name="item.id" v-for="item in typeSecond" :key="item.id">
            <van-list
              class="an-list"
              v-if="list.length>0"
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div v-for="goods in list" :key="goods.id" class="an-goods-box">
                <goods-list :goods="goods" />
              </div>
            </van-list>
            <van-empty v-else description="暂无数据" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import TopSearch from "@/components/TopSearch.vue";
import GoodsList from "@/components/GoodsCard/GoodsList.vue";
export default {
  components: {
    TopSearch,
    GoodsList,
  },
  props: {
    tab: {
      // 一级分类选中
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      activeKey: 0, // 侧边栏分类选中索引值
      activeSecond: "", // 二级分类选中
      tabList: [], // 商品分类
      typeSecond: [], // 二级分类
      list: [], // 商品列表
      loading: false,
      finished: false,
      getData: {
        page: 1,
        pageSize: 10,
        typeId: "",
        state: 1, // 上架的商品
      },
      total: 0, // 总条数
    };
  },
  created() {
    this.anLoad();
  },
  // keep-alive 执行
  activated() {
    this.activeKey = parseInt(this.tab);
    if (this.tabList.length > 0) {
      setTimeout(() => {
        this.changeTypeFirst(this.activeKey);
      }, 200);
    }
  },
  methods: {
    anLoad() {
      this.getType();
    },
    // 查询分类
    getType() {
      this.$api.goodsTypeList().then((res) => {
        if (res.length > 0) {
          this.tabList = this.changeType(res);
          // 默认选中第一个
          this.changeTypeFirst(this.tab);
        }
      });
    },
    changeType(array) {
      let nd = [];
      array.forEach((element) => {
        if (!element.parentID) {
          nd.push(element);
        }
      });
      nd.forEach((item) => {
        let chi = [];
        array.forEach((element) => {
          if (item.id == element.parentID) {
            chi.push(element);
          }
        });
        item.children = chi;
      });
      return nd;
    },

    // 查询商品列表
    getGoodsList(page) {
      if (page) {
        this.getData.page = page;
      }
      if (page == 1) {
        this.list = [];
      }
      let nd = Object.assign(this.getData);
      this.$api.goodsList(nd).then((res) => {
        this.loading = false;
        this.list = [...this.list, ...res.records];
        this.total = res.total;
        // 判断是否存在下一页数据
        if (this.total <= this.getData.page * this.getData.pageSize) {
          this.finished = true;
        }
      });
    },

    // 上拉加载
    onLoad() {
      let page = this.getData.page;
      page++;
      if (this.total > this.getData.page * this.getData.pageSize) {
        this.getGoodsList(page);
      }
    },

    // 一级分类切换
    changeTypeFirst(index) {
      this.typeSecond = this.tabList[index].children;
      this.getData.typeId = this.typeSecond[0].id;
      this.getGoodsList(1);
    },

    // 二级分类切换
    clickSecondType(name) {
      this.getData.typeId = name;
      this.getGoodsList(1);
    },
  },
};
</script>
<style lang="scss">
.an-sort-page {
  height: 100%;
}
.an-sort {
  .van-tabs {
    height: 100%;
  }
}
</style>
<style lang="scss" scoped>
.an-sort {
  height: calc(100% - 54px);
  position: relative;
  .an-right-body {
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
  }
  .an-list {
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    overflow-y: auto;
  }
  .an-goods-box {
    margin-bottom: 10px;
  }
}
</style>